<template>
    <div class="" style="width: 35%;">
      <el-card>
        <el-upload
        style="text-align: center;"
        class="avatar-uploader"
        action="http://localhost:8081/file/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :name="'multipartFile'"
        >
        <img ref="avatarImage" v-if="form.avatarUrl" :src="form.avatarUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    <el-form :model="form" label-width="70px" size="small" >
    <el-form-item label="用户名" >
      <el-input v-model="form.username" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="昵称" >
      <el-input v-model="form.nickname" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="地址" >
      <el-input v-model="form.address" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="电话" >
      <el-input v-model="form.phone" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="form.password" auto-complete="off"></el-input>
    </el-form-item>
  </el-form>
  <el-button type="primary" @click="confirmChange">确 定</el-button>
</el-card>

<el-dialog title="修改确认" :visible.sync="dialogFormVisible" size="small">
  <el-form label-width="70px">
    <p>输入你绑定的邮箱 {{ form.email }} 的验证码</p>
    <el-form-item label="邮件验证码">
      <el-input v-model="YanZhengMa" auto-complete="off"></el-input>
    </el-form-item>
    <el-button v-if="disableButton" type="primary" :disabled="true">{{ countdown }} 后再次发送</el-button>
    <el-button v-else type="primary" @click="sendYZM(form.email)" :disabled="disableButton">
      发送邮件验证码
    </el-button>

  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="checkYZM">确 定</el-button>
  </div>
</el-dialog>

</div>
</template>

<script>
import {ShowLogined} from "@/api/login"
import {sendMessage,checkEmail} from "@/api/email"
export default {
    data() {
      return {
        labelPosition: 'right',
        form:{},
        user:localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")):null,
        dialogFormVisible:false,
        YanZhengMa:"",
        disableButton: false,
        countdown: 0,
        uuid:""
      };
    },
    async created(){
        const res=await ShowLogined(this.user.username)
        this.form=res.data
        console.log(res)
    },
    methods:{
      handleAvatarSuccess(res){
        console.log(res)
        this.form.avatarUrl=res
        window.open(this.form.avatarUrl)
      },
      confirmChange(){
        this.dialogFormVisible=true
      },
      async sendYZM(email){
        // 禁用按钮
        this.disableButton = true;
        // 设置倒计时并启动定时器
      let remainingTime = 6;
      this.countdown = remainingTime;
      const timer = setInterval(() => {
        remainingTime--;
        this.countdown = remainingTime;
        if (remainingTime <= 0) {
          // 清除定时器并启用按钮
          clearInterval(timer);
          this.disableButton = false;
        }
      }, 1000);
      // console.log(email)
      const res= await sendMessage(email)
      console.log(res)
      this.uuid=res.data
      },
      async checkYZM(){
        console.log(this.uuid)
          const res=await checkEmail(this.uuid,this.YanZhengMa)
          if(res.data){
            this.$message.success("修改成功")
            this.dialogFormVisible=false
          }else{
            this.$message.error("验证码不正确")
          }
      }
    }
}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>